<template>
  <div class="detail-container detail-user-container">
    <div class="detail-body">
      <div>
        <label>用户名：</label>
        <span>{{ name }} </span>
      </div>
      <div>
        <label>联系方式：</label>
        <span>{{ phone }} </span>
      </div>
      <div>
        <label>角色：</label>
        <span>{{ region }} </span>
      </div>
      <div>
        <label>密码：</label>
        <span>{{ password }} </span>
      </div>

      <div>
        <label>备注：</label>
        <span>{{ desc }} </span>
      </div>
      <!-- <div>
        <label>创建时间：</label>
        <span>{{ createTime }} </span>
      </div> -->
    </div>
  </div>
</template>

<script>
import DataOptions from "../dataOptions";
export default {
  name: "UserDetail",
  props: {
    datailData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      detailID: "",
      name: this.datailData.name,
      phone: this.datailData.phone,
      region: this.datailData.region,
      desc: this.datailData.desc,
      password: this.datailData.password,
    };
  },
  mounted() {
    // this.detailID = this.$route.params.id || null;
    if (this.datailData !== {}) {
      // const obj = DataOptions.user.find((item) => item.id + "" === this.detailID) || null;
      this.name = this.datailData.name;
      this.phone = this.datailData.phone;
      this.region = this.datailData.region;
      this.desc =
        this.datailData.desc || "今天天气真热，好久都不下雨了，真想休息几天";
      this.password = this.datailData.password;
      // Object.keys(obj).forEach((key) => {
      //   dataDetail.push({
      //     label:
      //   });
      // });
    }
  },
  watch: {
    datailData() {
      this.name = this.datailData.name;
      this.phone = this.datailData.phone;
      this.region = this.datailData.region;
      this.desc = this.datailData.desc;
      this.password = this.datailData.password;
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  & > div {
    width: 70%;
    height: 90%;
  }
}
// .detail-container .detail-body {
//   width: 100%;
//   height: 100%;
//   overflow-y: auto;
// }
.detail-body {
  padding: 20px;
  color: #fff;
  & > div {
    width: 100%;
    min-height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    & > label {
      width: 200px;
      text-align: right;
      margin-right: 20px;
    }
    & > span {
      flex: 1;
    }
  }
}
</style>